<template>
  <div class="login">
    <div class="head">
      <img src="@/assets/img/login/logo.png" class="logo" />
      <span>通用能力共享平台</span>
    </div>

    <div class="box">
      <div class="box-content">
        <span class="title-name">用户登录</span>
        <span class="title-Ename">USER LOGIN</span>
        <div class="input-content">
          <div class="input-box" :class="errInput == 'dw' ? 'err-input' : ''">
            <div class="icon">
              <img src="@/assets/img/login/dw.png" />
            </div>
            <div class="input">
              <newTreeSelect
                width="100%"
                class="max-input"
                :data="dwTreeData"
                :defaultProps="treeProps"
                v-model="urseFrom.dwbm"
                nodeKey="dwbm"
              />
            </div>
          </div>
          <div class="input-box" :class="errInput == 'xm' ? 'err-input' : ''">
            <div class="icon">
              <img src="@/assets/img/login/yh.png" />
            </div>
            <div class="input">
              <el-input
                v-model="urseFrom.xm"
                placeholder="请输入用户名"
                @keydown.enter.native="handleLogin"
              />
            </div>
          </div>
          <div class="input-box" :class="errInput == 'kl' ? 'err-input' : ''">
            <div class="icon">
              <img src="@/assets/img/login/mm.png" />
            </div>
            <div class="input">
              <el-input
                v-model="urseFrom.kl"
                @keydown.enter.native="handleLogin"
                type="password"
                placeholder="请输入密码"
              />
            </div>
          </div>
          <div class="err-div" v-if="errMes">{{ errMes }}</div>
        </div>
        <div
          class="login-button"
          @click="handleLogin"
          :element-loading-background="{ 'login-loading': loading }"
        >
          {{ loading ? '登录中...' : '登 录' }}
        </div>
      </div>
    </div>
    <div class="yy-box"></div>
  </div>
</template>
<script>
import sm3 from '@/utils/sm3'
import zzjgService from '@/api/zzjg'
export default {
  data() {
    return {
      urseFrom: {
        dwbm: '',
        xm: '',
        kl: '',
      },
      // 单位下来树数据源
      dwTreeData: [],
      treeProps: {
        label: 'dwmc',
        children: 'children',
      },
      errInput: '', //  当前错误的文本框
      errMes: '',
      loading: false,
    }
  },
  mounted() {
    // 获取下拉数据
    this.getTreeList()
  },
  methods: {
    getTreeList() {
      const param = { dwbm: '' }
      zzjgService
        .queryByDwbm(param)
        .then((res) => {
          this.dwTreeData = res
          // 获取本地用户登陆信息
          this.readLoginInfo()
        })
        .catch((err) => {
          !err.isError && this.$message({ type: 'warning', message: err.message })
        })
    },
    /**
     * 登录按钮点击事件
     */
    handleLogin() {
      this.errMes = ''
      this.errInput = ''
      if (!this.urseFrom.dwbm) {
        this.errInput = 'dw'
        this.errMes = '请选择单位'
        return
      }
      if (!this.urseFrom.xm) {
        this.errInput = 'xm'
        this.errMes = '请输入用户名'
        return
      }
      if (!this.urseFrom.kl) {
        this.errInput = 'kl'
        this.errMes = '请输入密码'
        return
      }
      const obj = {
        dlbm: this.urseFrom.xm,
        kl: sm3(this.urseFrom.kl),
        zzdwbm: this.urseFrom.dwbm,
      }
      this.loading = true
      zzjgService
        .login(obj)
        .then(async (res) => {
          // 登陆成功后将登陆信息保存到本地
          this.saveLoginInfo()
          // 登录消息存到缓存里面
          this.$store.commit('SET_PERSONINFO', res)
          this.$store.commit('login/CHANGEINFO', res)
          this.loading = false
          this.$router.push('/index')
        })
        .catch((e) => {
          this.loading = false
          !e.isError &&
            this.$message({
              type: 'warning',
              message: e.message,
            })
        })
    },
    /**
     * 保存用户单位与用户名
     */
    saveLoginInfo() {
      if (this.urseFrom.dwbm) {
        localStorage.setItem('LOGIN_DWBM', this.urseFrom.dwbm)
      }
      if (this.urseFrom.xm) {
        localStorage.setItem('LOGIN_XM', this.urseFrom.xm)
      }
    },
    /**
     * 提取用户单位与用户名
     */
    readLoginInfo() {
      const dwbm = localStorage.getItem('LOGIN_DWBM')
      const xm = localStorage.getItem('LOGIN_XM')
      if (dwbm) {
        // 如果包含单位信息，则赋值
        if (this.recursionFun(this.dwTreeData, dwbm)) {
          this.urseFrom.dwbm = dwbm
        }
      }
      if (xm) {
        this.urseFrom.xm = xm
      }
    },
    /**
     * 递归单位树中是否包含已存储的单位信息
     */
    recursionFun(treeData, value) {
      let flag = false
      treeData.forEach((item) => {
        if (item.dwbm === value) {
          flag = true
        } else if (item.children && item.children.length > 0) {
          flag = this.recursionFun(item.children, value)
        }
      })
      return flag
    },
  },
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  @include bgImage('/login/bg.png');
  display: flex;
  flex-direction: column;
  align-items: center;

  .head {
    display: flex;
    align-items: center;
    margin: 5% 0 5% 0;

    .logo {
      width: 76px;
      height: 76px;
      margin-right: 23px;
    }

    font-size: 51px;
    color: #fff;
  }

  .box {
    width: 1000px;
    height: 500px;
    background-color: #f2f9ff;
    @include bgImage('/login/login-bg.png');
    background-repeat: no-repeat;
    background-position: 0 50%;

    .box-content {
      float: right;
      height: 100%;
      width: calc(100% - 504px);
      padding: 0 60px;
      padding-top: 40px;
      position: relative;

      .title-name {
        font-size: 30px;
        color: #7293ad;
      }

      .title-Ename {
        font-size: 24px;
        color: #b8c9d7;
        font-family: Arial;
        margin-left: 15px;
      }
    }
  }

  .yy-box {
    width: 1003px;
    height: 60px;
    @include bgImage('/login/yy.png');
    margin-top: 40px;
  }
}

.input-content {
  margin-top: 30px;
  overflow: hidden;
  width: 100%;

  .input-box {
    width: 100%;
    height: 44px;
    border: 1px solid #b6cae3;
    border-radius: 5px;
    margin-top: 30px;

    .icon {
      width: 40px;
      height: 100%;
      // background: red;
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .input {
      float: left;
      width: calc(100% - 40px);
      padding-top: 4px;

      /deep/.el-input.el-input--suffix > .el-input__inner {
        border: none !important;
        background: initial;
        padding-left: 0px;
      }

      /deep/.el-input__inner,
      .el-input__inner:hover {
        border: none !important;
        background: initial;
        padding-left: 0px;
      }
    }
  }

  .err-input {
    border-color: red !important;
  }
}

.err-div {
  position: absolute;
  right: 60px;
  // bottom: -20px;
  color: red;
}

.login-button {
  width: 100%;
  height: 50px;
  background: #0398ee;
  color: #fff;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  margin-top: 40px;
  display: inline-block;
  cursor: pointer;
}
.login-loading {
  pointer-events: none;
  cursor: default;
}
</style>
